<template>
	<view class="card">
		<view class="ul">
			<view v-show="item.tree_show" class="li  treeitemli"  v-for="(item,index) in treeData" :key="index">
				<view class="item"  :class="{'line-left':index!==0,'line-right':index!=treeData.length-1}">					
					<!-- <view class="tree_index" :style="{marginBottom: (tree_scrolltop)+'rpx'}" v-if="index==0 && is_show_ds">
						<view v-show="item.level" class="index_title">{{item.level}}代</view>
						<view v-show="item.ext5" class="index_title">{{item.ext5}}</view>						
						<view v-show="pop_sonnum || item.num " class="index_title">({{pop_sonnum?pop_sonnum:item.num }})</view>						
					</view> -->
					<!-- v-if="index!=0" -->
					<view class="tree_index tree_index111" :style="{marginBottom: (tree_scrolltop)+'rpx'}" >
						<view v-show="item.level" class="index_title">{{item.level}}代</view>
						<view v-show="item.ext5" class="index_title">{{item.ext5}}</view>						
						<!-- <view v-show="pop_sonnum || item.num " class="index_title">({{pop_sonnum?pop_sonnum:item.num }})</view>						 -->
						
						<!-- <view v-if="level==1" class="index_title">({{lv_count.l1_count}})</view>
						<view v-if="level==2" class="index_title">({{lv_count.l2_count}})</view>
						<view v-if="level==3" class="index_title">({{lv_count.l3_count}})</view>
						<view v-if="level==4" class="index_title">({{lv_count.l4_count}})</view> -->
					</view>
					
					
					<!-- <view v-show="item.level" class="descent">第{{item.level}}世</view> -->
					<!-- 上加号  请求 向上加载数据-->
					<view class="plus_up" @tap="look_up(item)" v-show="level==1 && !item.isshowall && item.level!=1">
						<image class="up_img" :src="photo_cdn+'zpupload/static/tablet/plus.png'"></image>
					</view>
					
					<!--  通过接口 下加号  调接口加载数据 -->
					<view class="plus" v-show="item.child&&item.child.length==0 && item.press_sign==1" @tap="req_look_more(item)" >
						<image class="plus_img" :src="photo_cdn+'zpupload/static/tablet/plus.png'"></image>
					</view>
									
					<!-- 下面有数据 并且是折叠过的 -->
					<view class="plus" v-if="item.child.length && item.press_sign==2"  @tap="look_moretwo(item)" >
						<image class="plus_img add1" :src="photo_cdn+'zpupload/static/tablet/plus.png'"></image>
					</view>
					<!-- 本地 显示隐藏 -->

					<!-- 减号 -->
					<view class="minus" @tap="pu_away(item)" v-if="item.child&&item.child.length&&item.press_sign==1" >
						<image class="minus_img" :src="photo_cdn+'zpupload/static/tablet/minus.png'"></image>
					</view>
										
					<view class="item-name"  @tap="openfather(item,subscript)"
						:class="{'line-bottom':item.child&&item.child.length>0&&!item.mate.length&&item.press_sign==1&&level!=4,'line-top':!treeFirst&&!item.mate.length,'spouseborder':item.mate.length, 'line-bottom-sp':item.child&&item.child.length>0&&item.mate.length&&item.press_sign==1&&level!=4,'line-top-sp':!treeFirst&&item.mate.length}">
						<!-- spouseborder 代表有配偶 -->
						<view class="flex ali-c people_border" :id="'people_border'+item.id" >	
							<view class="select" @tap="toggle_active(item)" :class="{active:item_active==item.id,'death':item.ext0==1,'girl':item.sex==2&&item.ext0==0,'boy':item.sex==1&&item.ext0==0}">
								<image class="member_img" v-if="item.ext0==1&&item.photo" :src='photo_cdn+item.photo' mode="aspectFill"></image>
								<view class="member_img" v-if="item.ext0==1&&item.sex==1&&!item.photo" :style="{backgroundImage:'url('+photo_cdn+'zpupload/20230908/d426bf5994a8aa1556.png)'}"></view>
								<view class="member_img" v-if="item.ext0==1&&item.sex==2&&!item.photo" :style="{backgroundImage:'url('+photo_cdn+'zpupload/20230908/b3a95ea9b070b2384f.png)'}" :src="photo_cdn + 'zpupload/static/tablet/girl_death.png'"></view>
								<view v-if="item.status==1">
									<image class="member_img" v-if="item.ext0==0&&item.photo" :src='photo_cdn+item.photo' mode="aspectFill"></image>
									<view class="member_img" v-if="item.ext0==0&&!item.photo&&item.sex==1" :style="{backgroundImage:'url('+photo_cdn+'zpupload/20230908/127dd2634a4184bd82.png)'}"></view>
									<view class="member_img" v-if="item.ext0==0&&!item.photo&&item.sex==2" :style="{backgroundImage:'url('+photo_cdn+'zpupload/20230908/a06fe882efa71333fa.png)'}"></view>
								</view>
								<view class="tally" :class="{active:item_active==item.id}" v-if="item.parent_id==0">始祖</view>
								<view class="member_main" v-if="item.status==1&&item.ext0==0">{{item.firstname}}</view>
								<view class="member_main" v-if="item.ext0==1">{{item.firstname}}</view>
								
								<!-- <view class="flex jus-c" v-if="item.status==1&&item.ext0==0">
									<view v-if="item.level" class="level_cjs">{{item.level}}世</view>
									<view v-if="item.ext5!=0" class="level_cjs">{{item.ext5}}字辈</view>
								</view> -->	
								<!-- <view class="flex jus-c" v-if="item.ext0==1">
									<view v-if="item.level" class="level_cjs">{{item.level}}世</view>
									<view v-if="item.ext5!=0" class="level_cjs">{{item.ext5}}字辈</view>
								</view> -->															
								<!-- <view class="clue" v-if="item.ext0==1">辞世</view> -->								
								<view class="none_pay" v-if="item.status==0&&item.ext0==0">***</view>
							</view>
							
							
							
							<!-- 配偶 -->
							<view v-if="item.mate.length">
								<view class="flex">
									<view v-for="(items,indexs) in item.mate" :key="indexs">										
										<view @tap.stop="openspouse(item,items,subscript)" class="wifeview" :class="{active:item_active==items.id,'death':items.ext0==1,'girl':items.sex==2&&items.ext0==0,'boy':items.sex==1&&items.ext0==0}">
											<image class="member_img" v-if="items.ext0==1&&items.photo" :src='photo_cdn+items.photo' mode="aspectFill"></image>
											<image class="member_img" v-if="items.ext0==1&&items.sex==1&&!items.photo" :src="photo_cdn + 'zpupload/static/tablet/boy_death.png'"></image>
											<image class="member_img" v-if="items.ext0==1&&items.sex==2&&!items.photo" :style="{backgroundImage:'url('+photo_cdn+'zpupload/20230908/7e636138b9243fe79b.png)'}"></image>
											<view v-if="items.status==1">	
												<image class="member_img" v-if="items.ext0==0&&items.photo" :src='photo_cdn+items.photo' mode="aspectFill"></image>
												<image class="member_img" v-if="items.ext0==0&&!items.photo&&items.sex==1" :style="{backgroundImage:'url('+photo_cdn+'zpupload/20230908/127dd2634a4184bd82.png)'}"></image>
												<image class="member_img" v-if="items.ext0==0&&!items.photo&&items.sex==2" :style="{backgroundImage:'url('+photo_cdn+'zpupload/20230908/a06fe882efa71333fa.png)'}"></image>
											</view>
											<view class="consort" :class="{active:item_active==items.id}">配偶</view>
											<view class="member" v-if="items.status==1&&items.ext0==0">{{items.name}}</view>
											<view class="member" v-if="items.ext0==1">{{items.name}}</view>
											
											<!-- <view class="flex jus-c" v-if="items.status==1&&items.ext0==0">
												<view class="level_cjs">{{level}}世</view>
												<view v-if="items.ext5!=0" class="level_cjs">{{items.ext5}}字辈</view>	
											</view> -->
											<!-- <view class="flex jus-c" v-if="items.ext0==1">
												<view class="level_cjs">{{level}}世</view>
												<view v-if="items.ext5!=0" class="level_cjs">{{items.ext5}}字辈</view>	
											</view> -->										
											<!-- <view class="clue_g" v-if="items.ext0==1">辞世</view> -->
											<view class="none_pay" v-if="items.status==0&&items.ext0==0">***</view>
										</view>										
									</view>
								</view>
							</view>
							
						</view>	
					</view>	
				</view>
				
				<TreeItem @openpup="openpupone" :pop_sonnum="sonnum"  :family_id="family_id"  :subscript="parse_subscript(index)" :level="level+1"  :tree-data="item.child" />
			</view>
		</view>
	</view>
</template>

<script>
	import TreeItem from '@/components/tree-item/tree-item.vue';
	import {familyTreeList} from "@/utils/api/zupu.js";
	import config from "@/utils/config.js";
	let {photo_cdn} = config.baseUrl;
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		components: {
			TreeItem
		},
		name: 'TreeItem',
		props: {
			family_id:{
				type:Number | String,
				default:"",
			},
			subscript:{//下标
				type: Array,
				default: () => []
			},
			level:{
				type:Number,
				default:1,
			},
			treeData: {
				type: Array,
				default: () => []
			},
			treeFirst: { //判断是否第一个
				type: Boolean,
				default: false
			},
			//儿子有多少个
			pop_sonnum:{
				type:Number,
				default:0,
			}
		},
		computed: {
			is_show_ds(){
				// _subscript
				// subscript
				// every
				// some
				let bool = this.subscript.every((item)=>{
					return item==0;
				})
				return bool;
			},
			//儿子有多少个
			sonnum(){
				let {treeData} = this;
				let num = 0;
				treeData.forEach((item,index)=>{
					if(item.child){
						num+=item.child.length; 
					}
				})
				return num;
			},
			...mapState({
			algebra: state => state.treedata.algebra,//当前树状图最深的代数
			item_active: state => state.treedata.item_active,//高亮显示的 选中id
			tree_scrolltop:state => state.treedata.tree_scrolltop,//页面滑动高度
			lv_count:state => state.treedata.lv_count,//每一代有多少人的统计
		})
		},

		data() {
			return {
				photo_cdn,
			}
		},
		created() {

		},
		methods: {
			...mapMutations(['updateTreedataItem']),
			...mapActions(['showTree','familyTreeListfun','ModifyItemDataTop','ModifyItemData']),
			parse_subscript(index){
				if(this.subscript){
					return [...this.subscript,index];
				}else{
					return [index];
				}
			},
			openfather(item,subscript) {
				this.updateTreedataItem({val:true,key:'showpup'});
				this.updateTreedataItem({val:{...item,item_level:item.level,subscript:subscript,level:this.level},key:'openpup_params'});								
			},
			openpupone(item) {								
				this.updateTreedataItem({val:true,key:'showpup'});
				this.updateTreedataItem({val:{...item},key:'openpup_params'});
			},
			openspouse(item1,item2,subscript){								
				this.updateTreedataItem({val:true,key:'showpup'});
				this.updateTreedataItem({val:{...item1,item2:item2,subscript:subscript,ismate:true},key:'openpup_params'});
				if(this.item_active==item2.id){
					return false;
				}
				this.updateTreedataItem({val:item2.id,key:'item_active'});
				// console.log(this.item_active,'item_active')
			},
			
			//向下看 显示出来
			async req_look_more(more_item){
				console.info("more_item",more_item);
				if(more_item.press_sign==1&&more_item.child.length==0){//去调接口加载数据
					await this.updateTreedataItem({val:this.subscript,key:'sel_subscript'});//保存操作数据的下标
					let defaultdata = await this.ModifyItemData({family_id:this.family_id,family_tree_id:more_item.id,more_item:more_item,level:this.level});
					// console.info('defaultdata',defaultdata);
					
					
					
				}
			},
			//向下看 显示出来
			async look_moretwo(more_item){
				await this.updateTreedataItem({val:this.subscript,key:'sel_subscript'});//保存操作数据的下标
				await this.showTree({more_item:more_item,val:true,level:this.level})
			},
			//收起来
			async pu_away(pu_item){
				await this.updateTreedataItem({val:this.subscript,key:'sel_subscript'});//保存操作数据的下标
				await this.showTree({more_item:pu_item,val:false,level:this.level})
			},
			//向上看 接口
			async look_up(up_item){
				await this.ModifyItemDataTop({family_id:this.family_id,family_tree_id:up_item.id});
			},
			//选中加阴影
			toggle_active(item){
				if(this.item_active==item.id){
					return false;
				}
				this.updateTreedataItem({val:item.id,key:'item_active'});
			}
		}
	}
</script>

<style lang="scss" scoped>
	$line-length: 42rpx; //线长
	$spacing: 40rpx; //间距
	$extend: calc(#{$spacing} + 2px); //延长线
	// 线样式
	@mixin line {
		content: "";
		display: block;
		width: 4rpx;
		position: absolute;
		left: -10rpx;
		right: 0;
		margin: auto;
		background: #FDB465;
	}
	@mixin sp-line {
		content: "";
		display: block;
		width: 4rpx;
		position: absolute;
		left: 80rpx;
		right: 0;
		background: #FDB465;
	}
	.card {
		.ul {
			display: flex;
			justify-content: start;
			padding: 20rpx 0 15rpx 0;

			.li {
				.item {
					display: flex;
					justify-content: start;
					align-items: center;
					position: relative;
					margin-left: 70rpx;
					position: relative;					
					.tree_index{
						width: 66rpx;
						height: 120rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						position: fixed;
						left: 14rpx;
						margin-bottom: 50rpx;						
						border-radius: 10rpx;						
						background: #FFFFFF;
						z-index: 777;
						.index_title{
							font-size: 24rpx;
							color: #FDB15F;
							text-align: center;
							font-weight: 600;
						}
					}
					.descent{
						position: absolute;
						bottom: 5rpx;
						left: 70rpx;
						color: #FDB15F;
						font-size: 18rpx;
					}
					.plus{
						width: 30rpx;
						height: 30rpx;
						position: absolute;
						border-radius: 50%;
						bottom: -12rpx;
						left: 74rpx;
						z-index: 99;
						background-color: #FFFCF9;
						.plus_img{
							width: 30rpx;
							height: 30rpx;
						}
					}
					.plus_up{
						width: 30rpx;
						height: 30rpx;
						position: absolute;
						top: -18rpx;
						left: 72rpx;
						z-index: 99;
						background-color: #FFFCF9;
						border-radius: 50%;
						.up_img{
							width: 30rpx;
							height: 30rpx;
						}
					}
					
					.minus{
						width: 30rpx;
						height: 30rpx;
						position: absolute;
						bottom: -18rpx;
						left: 76rpx;
						z-index: 99;
						border-radius: 50%;
						background-color: #FFFCF9;
						.minus_img{
							width: 30rpx;
							height: 30rpx;
						}
					}
					&-name {
						position: relative;
						display: flex;
						flex-direction: column;
						align-items: center;
						margin: 15rpx 10rpx;
						padding: 18rpx 18rpx;
						font-weight: 800;
						font-size: 26rpx;
						
						.select.active{
							background-image: url("~@/static/tablet/girl_case.png");
							color: #EA2D30;
						}
						// 男
						& .boy {
							color: #57764F;
							background-image: url("~@/static/tablet/boy_case.png");
							background-size: 135rpx 215rpx;
							background-repeat: no-repeat;
							box-sizing: border-box;
							padding: 0;
							width: 135rpx;
							height: 215rpx;
							text-align: center;
						}
					
						// 女
						& .girl {
							color: #FDB363;
							background-image: url("~@/static/tablet/boy_case.png");
							background-size: 135rpx 215rpx;
							background-repeat: no-repeat;
							box-sizing: border-box;
							padding: 0;
							width: 135rpx;
							height: 215rpx;
							text-align: center;
						}
						
						//辞世
						& .death {
							color: #000000;
							background-image: url("~@/static/tablet/death.png");
							background-size: 135rpx 215rpx;
							background-repeat: no-repeat;
							padding: 0;
							width: 135rpx;
							height: 215rpx;
							text-align: center;
						}
						
						& .wifeview{
							margin-left: 2rpx;												
						}
						
						& .wifeview.active{
							background-image: url("~@/static/tablet/girl_case.png");
							color: #EA2D30;
						}
						.none_pay{
							line-height: 286rpx;
							font-size: 30rpx;
							font-weight: 600;
						}
						.member_img {
							width: 86rpx;
							height: 82rpx;
							margin: 0 auto;
							background-size: 100% 100%;
							margin-top: 36rpx;
							border-radius: 6rpx;
						}

						.member {
							margin: 0 auto;
							padding: 0 2rpx;
							margin-top: 8rpx;
						}
						.consort{
							width: 58rpx;
							// height: 20rpx;
							padding: 4rpx 0;
							border: 1rpx solid #EE9948;
							display: flex;
							align-items: center;
							justify-content: center;
							margin: 0 auto;
							margin-top: 2rpx;
							color: #EE9948;
							font-size: 16rpx;
						}
						.consort.active{
							color: #EA2D30;
							border: 1rpx solid #EA2D30;
						}
						.member_main{
							margin: 0 auto;
							padding: 0 2rpx;
							margin-top: 8rpx;
						}
						.tally{
							font-size: 16rpx;
							color: #B3B3B3;
							display: flex;
							justify-content: center;
							align-items: center;
							margin: 0 auto;
							width: 58rpx;
							// height: 20rpx;
							padding: 4rpx 0;
							margin-top: 8rpx;
							border: 1rpx solid #B3B3B3;
						}
						.tally.active{
							color: #EA2D30;
							border: 1rpx solid #EA2D30;
						}
						.level_cjs{
							color: #9E9E9E;
							font-size: 20rpx;
						}
						.clue {
							padding: 0rpx 10rpx;
							text-align: center;
							border: 1rpx solid #4E4E4E;
							color: #4E4E4E;
							font-size: 18rpx;
							margin-top: 28rpx;
							display: inline-block
						}
						.clue_g {
							padding: 0rpx 10rpx;
							text-align: center;
							border: 1rpx solid #4E4E4E;
							color: #4E4E4E;
							font-size: 18rpx;
							margin-top: 56rpx;
							display: inline-block
						}
						
					}
					//一个人，没有配偶
					// .alone{
					// 	background-clip: content-box;
					// }
					// .spouseborder{
					// 	padding: 15rpx;
					// 	border: 4rpx solid #FDB465;
					// 	border-radius: 20rpx;
					// 	background:transparent;
					// }
				}
			}
		}

		// 向下的线
		// .line-bottom {
		// 	&::after {
		// 		@include line();
		// 		bottom: -69rpx;
		// 		height: 86rpx;
		// 	}
		// }
		//有配偶向下的线
		// .line-bottom-sp{
		// 	&::after {
		// 		@include sp-line();
		// 		bottom: -56rpx;
		// 		height: 72rpx;
		// 	}
		// }
		// 向上的线
		.line-top {
			&::before {
				@include line();
				top: -28rpx;
				height: 46rpx;
			}
		}
		//有配偶向上的线
		.line-top-sp{
			&::before {
				@include sp-line();
				top: -28rpx;
				height: 46rpx;
			}
		}
		
		// 向左的线
		// .line-left {
		// 	margin: 0 $spacing;

		// 	&::after {
		// 		@include line();
		// 		width: calc(50% );
		// 		height: 3rpx;
		// 		left: calc(-50% - #{$extend});
		// 		top: 0;
		// 		background-color: red;
		// 	}
		// }
		
		// 向右的线
		.line-right {
			&::before {
				@include line();
				width: calc(100% + #{$spacing} + #{$spacing});
				top: -16rpx;
				height: 4rpx;
				right: calc(4rpx - #{$extend} - #{$extend} - #{$extend} - #{$extend} - #{$extend} - #{$extend} );	
			}
		}
	}
</style>				
